<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>乐购商城</title>

    <!-- demo 用例：例子.css   非核心.css  -->
    <!-- <link rel="stylesheet" href="./lib/css/demo.css" type="text/css" media="screen" title="no title" charset="utf-8"> -->
    <script src="http://www.jq22.com/jquery/1.4.4/jquery.min.js"></script>
    <script src="./lib/js/flux.min.js" type="text/javascript" charset="utf-8"></script>


    <!-- 1.项目样式重置 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 2.引入常用样式 -->
    <link rel="stylesheet" href="./css/common.css">
    <!-- 3.引入当前页面的样式 -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 4.引入自己的JS -->
    <script src="./js/index.js"></script>

</head>

<body>
    <header class="header">
        <div class="container-full bg-black font-white">
            <div class="first-nav center cf">
                <a href="#" class="fl font-white f-l-i220">legochina.cn</a>
                <p class="fr">欢迎光临
                    <a href="#" class="theme-font-color">乐购</a>,请
                    <a href="#" class="font-white">登录</a>/
                    <a href="#" class="theme-font-color">注册</a>
                </p>
                <img class="logo" src="./images/logo.jpg" alt="">
            </div>
        </div>
        <!-- 搜索框 -->
        <div class="center search-box cf" style="min-width: 700px;">

            <div class="shopcart fr">
                <a href="#" class="font-white">购物车
                    <span>3</span>
                </a>
                <a href="#">我的订单</a>
            </div>

            <div class="fr search-input-box">
                <form action="">
                    <input type="text" class="theme-border-color" placeholder="创意文具">
                    <input type="submit" value="" style="margin-left:-7px; cursor: pointer;">
                </form>
                <!-- 购物车的订单 -->
            </div>
        </div>
        <!-- 导航栏 -->
        <nav class="navigation center">
            <ul class="cf">
                <li>
                    <a href="#">图书</a>
                </li>
                <li>
                    <a href="#">电子书</a>
                </li>
                <li>
                    <a href="#">原创文学</a>
                </li>
                <li>
                    <a href="#">服装</a>
                </li>
                <li>
                    <a href="#">户外运动</a>
                </li>
                <li>
                    <a href="#">儿童装</a>
                </li>
                <li>
                    <a href="#">家具</a>
                </li>
                <li>
                    <a href="#">创意文具</a>
                </li>
                <li>
                    <a href="#">地方特产</a>
                </li>
                <li>
                    <a href="#">海外购</a>
                </li>
                <li>
                    <a href="#">电器城</a>
                </li>
            </ul>
        </nav>
    </header>
    <main>
        <!-- 轮播 -->
        <section class="swiper-container cf center">
            <div class="fl">
                <ul>
                    <li>
                        <p>
                            <a href="#">图书</a>、
                            <a href="#">电子书</a>、
                            <a href="#">童书1</a>
                        </p>
                        <dl>
                            <p>
                                <a href="#">图书馆>></a>
                                <a href="#">儿童书馆>></a>
                                <a href="#">电子书馆>></a>
                            </p>
                            <dt>文艺1</dt>
                            <dd>
                                <a href="#">小说 </a>
                                <a href="#">文学 </a>
                                <a href="#">传记 </a>
                                <a href="#">青春 </a>
                                <a href="#">动漫 </a>
                                <a href="#">艺术 </a>
                                <a href="#">摄影 </a>
                                <a href="#">明星</a>
                            </dd>

                        </dl>
                    </li>
                    <li>
                        <p>
                            <a href="#">图书</a>、
                            <a href="#">电子书</a>、
                            <a href="#">童书2</a>
                        </p>
                        <dl>
                            <p>
                                <a href="#">图书馆>></a>
                                <a href="#">儿童书馆>></a>
                                <a href="#">电子书馆>></a>
                            </p>
                            <dt>文艺2</dt>
                            <dd>
                                <a href="#">小说 </a>
                                <a href="#">文学 </a>
                                <a href="#">传记 </a>
                                <a href="#">青春 </a>
                                <a href="#">动漫 </a>
                                <a href="#">艺术 </a>
                                <a href="#">摄影 </a>
                                <a href="#">明星</a>
                            </dd>

                        </dl>
                    </li>
                    <li>
                        <p>
                            <a href="#">图书</a>、
                            <a href="#">电子书</a>、
                            <a href="#">童书3</a>
                        </p>
                        <dl>
                            <p>
                                <a href="#">图书馆>></a>
                                <a href="#">儿童书馆>></a>
                                <a href="#">电子书馆>></a>
                            </p>
                            <dt>文艺3</dt>
                            <dd>
                                <a href="#">小说 </a>
                                <a href="#">文学 </a>
                                <a href="#">传记 </a>
                                <a href="#">青春 </a>
                                <a href="#">动漫 </a>
                                <a href="#">艺术 </a>
                                <a href="#">摄影 </a>
                                <a href="#">明星</a>
                            </dd>

                        </dl>
                    </li>
                    <li>
                        <p>
                            <a href="#">图书</a>、
                            <a href="#">电子书</a>、
                            <a href="#">童书4</a>
                        </p>
                        <dl>
                            <p>
                                <a href="#">图书馆>></a>
                                <a href="#">儿童书馆>></a>
                                <a href="#">电子书馆>></a>
                            </p>
                            <dt>文艺4</dt>
                            <dd>
                                <a href="#">小说 </a>
                                <a href="#">文学 </a>
                                <a href="#">传记 </a>
                                <a href="#">青春 </a>
                                <a href="#">动漫 </a>
                                <a href="#">艺术 </a>
                                <a href="#">摄影 </a>
                                <a href="#">明星</a>
                            </dd>

                        </dl>
                    </li>
                </ul>

            </div>
            <div class="fl">
                <div id="slider">

                    <img src="./lib/img/avatar.jpg" alt="" />
                    <!-- 测试出了不能放其他元素 
                            <button>111</button> -->

                    <img src="./lib/img/ironman.jpg" alt="" />

                    <img src="./lib/img/tron.jpg" alt="" />

                    <img src="./lib/img/greenhornet.jpg" alt="" />

                </div>

            </div>
        </section>
        <!-- 今日推荐 -->
        <section class="today-recommend center">
            <h3 class="ti-10 theme-font-color">乐购·今日推荐</h3>
            <div class="line5 theme-bg-color"></div>
            <!-- UL左侧一条线，li右侧一条线 -->
            <ul class="cf">
                <li class="text-center">
                    <img src="./images/re-demo.jpg" alt="">
                    <p class="hot-sell" style="text-align: left;">限时购</p>
                    <p class="font-grey">黑爵青蜂侠六键电竞游戏鼠标</p>
                    <p class="font-red">全国联保 一年免费包换</p>
                    <p class="font-red">$ 248</p>
                </li>
                <li class="text-center">
                    <img src="./images/re-demo.jpg" alt="">
                    <p class="hot-sell" style="text-align: left;">限时购</p>
                    <p class="font-grey">黑爵青蜂侠六键电竞游戏鼠标</p>
                    <p class="font-red">全国联保 一年免费包换</p>
                    <p class="font-red">$ 248</p>
                </li>
                <li class="text-center">
                    <img src="./images/re-demo.jpg" alt="">
                    <p class="hot-sell" style="text-align: left;">限时购</p>
                    <p class="font-grey">黑爵青蜂侠六键电竞游戏鼠标</p>
                    <p class="font-red">全国联保 一年免费包换</p>
                    <p class="font-red">$ 248</p>
                </li>
                <li class="text-center">
                    <img src="./images/re-demo.jpg" alt="">
                    <p class="hot-sell" style="text-align: left;">限时购</p>
                    <p class="font-grey">黑爵青蜂侠六键电竞游戏鼠标</p>
                    <p class="font-red">全国联保 一年免费包换</p>
                    <p class="font-red">$ 248</p>
                </li>
                <li class="text-center">
                    <img src="./images/re-demo.jpg" alt="">
                    <p class="hot-sell" style="text-align: left;">限时购</p>
                    <p class="font-grey">黑爵青蜂侠六键电竞游戏鼠标</p>
                    <p class="font-red">全国联保 一年免费包换</p>
                    <p class="font-red">$ 248</p>
                </li>
                <li class="text-center">
                    <img src="./images/re-demo.jpg" alt="">
                    <p class="hot-sell" style="text-align: left;">限时购</p>
                    <p class="font-grey">黑爵青蜂侠六键电竞游戏鼠标</p>
                    <p class="font-red">全国联保 一年免费包换</p>
                    <p class="font-red">$ 248</p>
                </li>
                <li class="text-center">
                    <img src="./images/re-demo.jpg" alt="">
                    <p class="hot-sell" style="text-align: left;">限时购</p>
                    <p class="font-grey">黑爵青蜂侠六键电竞游戏鼠标</p>
                    <p class="font-red">全国联保 一年免费包换</p>
                    <p class="font-red">$ 248</p>
                </li>
                <li class="text-center">
                    <img src="./images/re-demo.jpg" alt="">
                    <p class="hot-sell" style="text-align: left;">限时购</p>
                    <p class="font-grey">黑爵青蜂侠六键电竞游戏鼠标</p>
                    <p class="font-red">全国联保 一年免费包换</p>
                    <p class="font-red">$ 248</p>
                </li>
                <li class="text-center">
                    <img src="./images/re-demo.jpg" alt="">
                    <p class="hot-sell" style="text-align: left;">限时购</p>
                    <p class="font-grey">黑爵青蜂侠六键电竞游戏鼠标</p>
                    <p class="font-red">全国联保 一年免费包换</p>
                    <p class="font-red">$ 248</p>
                </li>
                <li class="text-center">
                    <img src="./images/re-demo.jpg" alt="">
                    <p class="hot-sell" style="text-align: left;">限时购</p>
                    <p class="font-grey">黑爵青蜂侠六键电竞游戏鼠标</p>
                    <p class="font-red">全国联保 一年免费包换</p>
                    <p class="font-red">$ 248</p>
                </li>
                <li class="text-center">
                    <img src="./images/re-demo.jpg" alt="">
                    <p class="hot-sell" style="text-align: left;">限时购</p>
                    <p class="font-grey">黑爵青蜂侠六键电竞游戏鼠标</p>
                    <p class="font-red">全国联保 一年免费包换</p>
                    <p class="font-red">$ 248</p>
                </li>
                <li class="text-center">
                    <img src="./images/re-demo.jpg" alt="">
                    <p class="hot-sell" style="text-align: left;">限时购</p>
                    <p class="font-grey">黑爵青蜂侠六键电竞游戏鼠标</p>
                    <p class="font-red">全国联保 一年免费包换</p>
                    <p class="font-red">$ 248</p>
                </li>
            </ul>
        </section>
        <!-- 电子书2 -->
        <section class="electron-book cf center">
            <div class="electron-book-left fl">
                <div class="electron-book-title cf">
                    <h3 class="fl">图书 电子书</h3>
                    <div class="fr cf">
                        <p class="fl">最新上架</p>
                        <p class="fl">独家畅销</p>
                        <p class="fl">电子书</p>
                    </div>
                </div>
                <!-- 线 -->
                <div class="line5 theme-bg-color"></div>
                <!-- 内容 -->
                <div class="electron-book-content test">
                    <div class="ebook-content-left fl">
                        <img src="./images/ebook-demo1.jpg" alt="图片" />
                        <p>
                            <a href="#">青春文学</a>
                            <a href="#">青春文学</a>
                            <a href="#">青春文学</a>
                        </p>
                        <p>
                            <a href="#">青春文学</a>
                            <a href="#">青春文学</a>
                            <a href="#">青春文学</a>
                        </p>
                        <p>
                            <a href="#">青春文学</a>
                            <a href="#">青春文学</a>
                            <a href="#">青春文学</a>
                        </p>
                        <p>
                            <a href="#">青春文学</a>
                            <a href="#">青春文学</a>
                            <a href="#">青春文学</a>
                        </p>
                    </div>
                    <div class="ebook-content-right  fl">
                        <ul class="cf show">
                            <li class="text-center">
                                <div id="index_swiper1">
                                    <img src="./lib/img/avatar.jpg" alt="" />
                                    <img src="./lib/img/ironman.jpg" alt="" />
                                    <img src="./lib/img/tron.jpg" alt="" />
                                    <img src="./lib/img/greenhornet.jpg" alt="" />
                                </div>
                            </li>
                            <li class="text-center">
                                <p class="font-grey">奥运狂欢11</p>
                                <p class="font-red">10万种电子书 直降了40%</p>
                                <img src="./images/ebook-demo2.jpg" alt="">
                                <p class="font-red">$ 248
                                    <span class="font-grey" style="text-decoration-line:line-through;
                                                ">￥79</span>
                                </p>
                            </li>
                            <li class="text-center">
                                <p class="font-grey">奥运狂欢</p>
                                <p class="font-red">10万种电子书 直降了40%</p>
                                <img src="./images/ebook-demo2.jpg" alt="">
                                <p class="font-red">$ 248
                                    <span class="font-grey" style="text-decoration-line:line-through;
                                                    ">￥79</span>
                                </p>
                            </li>
                            <li class="text-center">
                                <p class="font-grey">奥运狂欢</p>
                                <p class="font-red">10万种电子书 直降了40%</p>
                                <img src="./images/ebook-demo2.jpg" alt="">
                                <p class="font-red">$ 248
                                    <span class="font-grey" style="text-decoration-line:line-through;
                                            ">￥79</span>
                                </p>
                            </li>
                            <li class="text-center">
                                <p class="font-grey">奥运狂欢</p>
                                <p class="font-red">10万种电子书 直降了40%</p>
                                <img src="./images/ebook-demo2.jpg" alt="">
                                <p class="font-red">$ 248
                                    <span class="font-grey" style="text-decoration-line:line-through;
                                                ">￥79</span>
                                </p>
                            </li>
                            <li class="text-center">
                                <p class="font-grey">奥运狂欢</p>
                                <p class="font-red">10万种电子书 直降了40%</p>
                                <img src="./images/ebook-demo2.jpg" alt="">
                                <p class="font-red">$ 248
                                    <span class="font-grey" style="text-decoration-line:line-through;
                                                    ">￥79</span>
                                </p>
                            </li>
                            <li class="text-center">
                                <p class="font-grey">奥运狂欢</p>
                                <p class="font-red">10万种电子书 直降了40%</p>
                                <img src="./images/ebook-demo2.jpg" alt="">
                                <p class="font-red">$ 248
                                    <span class="font-grey" style="text-decoration-line:line-through;
                                                        ">￥79</span>
                                </p>
                            </li>
                        </ul>

                        <ul class="cf">
                            <li class="text-center">
                                <div id="index_swiper2">
                                    <img src="./lib/img/avatar.jpg" alt="" />
                                    <img src="./lib/img/ironman.jpg" alt="" />
                                    <img src="./lib/img/tron.jpg" alt="" />
                                    <img src="./lib/img/greenhornet.jpg" alt="" />
                                </div>
                            </li>
                            <li class="text-center">
                                <p class="font-grey">奥运狂欢222</p>
                                <p class="font-red">10万种电子书 直降了40%</p>
                                <img src="./images/ebook-demo2.jpg" alt="">
                                <p class="font-red">$ 248
                                    <span class="font-grey" style="text-decoration-line:line-through;
                                                    ">￥79</span>
                                </p>
                            </li>
                            <li class="text-center">
                                <p class="font-grey">奥运狂欢</p>
                                <p class="font-red">10万种电子书 直降了40%</p>
                                <img src="./images/ebook-demo2.jpg" alt="">
                                <p class="font-red">$ 248
                                    <span class="font-grey" style="text-decoration-line:line-through;
                                                        ">￥79</span>
                                </p>
                            </li>
                            <li class="text-center">
                                <p class="font-grey">奥运狂欢</p>
                                <p class="font-red">10万种电子书 直降了40%</p>
                                <img src="./images/ebook-demo2.jpg" alt="">
                                <p class="font-red">$ 248
                                    <span class="font-grey" style="text-decoration-line:line-through;
                                                ">￥79</span>
                                </p>
                            </li>
                            <li class="text-center">
                                <p class="font-grey">奥运狂欢</p>
                                <p class="font-red">10万种电子书 直降了40%</p>
                                <img src="./images/ebook-demo2.jpg" alt="">
                                <p class="font-red">$ 248
                                    <span class="font-grey" style="text-decoration-line:line-through;
                                                    ">￥79</span>
                                </p>
                            </li>
                            <li class="text-center">
                                <p class="font-grey">奥运狂欢</p>
                                <p class="font-red">10万种电子书 直降了40%</p>
                                <img src="./images/ebook-demo2.jpg" alt="">
                                <p class="font-red">$ 248
                                    <span class="font-grey" style="text-decoration-line:line-through;
                                                        ">￥79</span>
                                </p>
                            </li>
                            <li class="text-center">
                                <p class="font-grey">奥运狂欢</p>
                                <p class="font-red">10万种电子书 直降了40%</p>
                                <img src="./images/ebook-demo2.jpg" alt="">
                                <p class="font-red">$ 248
                                    <span class="font-grey" style="text-decoration-line:line-through;
                                                            ">￥79</span>
                                </p>
                            </li>
                        </ul>

                        <ul class="cf">
                            <li class="text-center">
                                <div id="index_swiper3">
                                    <img src="./lib/img/avatar.jpg" alt="" />
                                    <img src="./lib/img/ironman.jpg" alt="" />
                                    <img src="./lib/img/tron.jpg" alt="" />
                                    <img src="./lib/img/greenhornet.jpg" alt="" />
                                </div>
                            </li>
                            <li class="text-center">
                                <p class="font-grey">奥运狂欢333</p>
                                <p class="font-red">10万种电子书 直降了40%</p>
                                <img src="./images/ebook-demo2.jpg" alt="">
                                <p class="font-red">$ 248
                                    <span class="font-grey" style="text-decoration-line:line-through;
                                                        ">￥79</span>
                                </p>
                            </li>
                            <li class="text-center">
                                <p class="font-grey">奥运狂欢</p>
                                <p class="font-red">10万种电子书 直降了40%</p>
                                <img src="./images/ebook-demo2.jpg" alt="">
                                <p class="font-red">$ 248
                                    <span class="font-grey" style="text-decoration-line:line-through;
                                                            ">￥79</span>
                                </p>
                            </li>
                            <li class="text-center">
                                <p class="font-grey">奥运狂欢</p>
                                <p class="font-red">10万种电子书 直降了40%</p>
                                <img src="./images/ebook-demo2.jpg" alt="">
                                <p class="font-red">$ 248
                                    <span class="font-grey" style="text-decoration-line:line-through;
                                                    ">￥79</span>
                                </p>
                            </li>
                            <li class="text-center">
                                <p class="font-grey">奥运狂欢</p>
                                <p class="font-red">10万种电子书 直降了40%</p>
                                <img src="./images/ebook-demo2.jpg" alt="">
                                <p class="font-red">$ 248
                                    <span class="font-grey" style="text-decoration-line:line-through;
                                                        ">￥79</span>
                                </p>
                            </li>
                            <li class="text-center">
                                <p class="font-grey">奥运狂欢</p>
                                <p class="font-red">10万种电子书 直降了40%</p>
                                <img src="./images/ebook-demo2.jpg" alt="">
                                <p class="font-red">$ 248
                                    <span class="font-grey" style="text-decoration-line:line-through;
                                                            ">￥79</span>
                                </p>
                            </li>
                            <li class="text-center">
                                <p class="font-grey">奥运狂欢</p>
                                <p class="font-red">10万种电子书 直降了40%</p>
                                <img src="./images/ebook-demo2.jpg" alt="">
                                <p class="font-red">$ 248
                                    <span class="font-grey" style="text-decoration-line:line-through;
                                                                ">￥79</span>
                                </p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="electron-book-right fr test">
                <h3>新书畅销榜</h3>
                <ul>
                    <li>
                        <span class="num">1</span>
                        <p>就喜欢你看不惯我又要干不</p>
                        <!-- 1个元素浮动，另一个不浮动: 1: 让所有元素都浮动 -->
                        <!-- 2: overflow:hidden -->
                        <div style="overflow:hidden">
                            <img src="./images/ebook-demo3.jpg" alt="">
                            <p>从你的世界路过入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读</p>
                        </div>
                    </li>
                    <li>
                        <span class="num">2</span>
                        <p>就喜欢你看不惯我又要干不</p>
                        <!-- 1个元素浮动，另一个不浮动: 1: 让所有元素都浮动 -->
                        <!-- 2: overflow:hidden -->
                        <div style="overflow:hidden">
                            <img src="./images/ebook-demo3.jpg" alt="">
                            <p>从你的世界路过入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读</p>
                        </div>
                    </li>
                    <li>
                        <span class="num">3</span>
                        <p>就喜欢你看不惯我又要干不</p>
                        <!-- 1个元素浮动，另一个不浮动: 1: 让所有元素都浮动 -->
                        <!-- 2: overflow:hidden -->
                        <div style="overflow:hidden">
                            <img src="./images/ebook-demo3.jpg" alt="">
                            <p>从你的世界路过入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读</p>
                        </div>
                    </li>
                    <li>
                        <span class="num">4</span>
                        <p>就喜欢你看不惯我又要干不</p>
                        <!-- 1个元素浮动，另一个不浮动: 1: 让所有元素都浮动 -->
                        <!-- 2: overflow:hidden -->
                        <div style="overflow:hidden">
                            <img src="./images/ebook-demo3.jpg" alt="">
                            <p>从你的世界路过入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读</p>
                        </div>
                    </li>
                    <li>
                        <span class="num">5</span>
                        <p>就喜欢你看不惯我又要干不</p>
                        <!-- 1个元素浮动，另一个不浮动: 1: 让所有元素都浮动 -->
                        <!-- 2: overflow:hidden -->
                        <div style="overflow:hidden">
                            <img src="./images/ebook-demo3.jpg" alt="">
                            <p>从你的世界路过入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读</p>
                        </div>
                    </li>
                    <li>
                        <span class="num">6</span>
                        <p>就喜欢你看不惯我又要干不</p>
                        <!-- 1个元素浮动，另一个不浮动: 1: 让所有元素都浮动 -->
                        <!-- 2: overflow:hidden -->
                        <div style="overflow:hidden">
                            <img src="./images/ebook-demo3.jpg" alt="">
                            <p>从你的世界路过入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读</p>
                        </div>
                    </li>
                    <li>
                        <span class="num">7</span>
                        <p>就喜欢你看不惯我又要干不</p>
                        <!-- 1个元素浮动，另一个不浮动: 1: 让所有元素都浮动 -->
                        <!-- 2: overflow:hidden -->
                        <div style="overflow:hidden">
                            <img src="./images/ebook-demo3.jpg" alt="">
                            <p>从你的世界路过入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读</p>
                        </div>
                    </li>
                </ul>

            </div>
        </section>
        <!-- 服装3 -->
        <section class="clothing center">
            <img src="./images/cloth.jpg" alt="">
        </section>
        <!-- 户外运动4 -->
        <section class="outer-sport center">
                <img src="./images/sport.png" alt="">
        </section>
        <!-- 童装 -->
        <section class="children-clothing center">
                <img src="./images/child.png" alt="">
        </section>
        <!-- 家居 -->
        <section class="house-holder center">
                <img src="./images/house.png" alt="">
        </section>
        <!-- 推广商品 -->
        <section class="recommend-goods center">
                <img src="./images/tuijian.png" alt="">
        </section>

      <section class="floor">
            <!-- floor楼层 -->
            <ul>
                <li>图书</li>
                <li>服装</li>
                <li>运动</li>
                <li>童装</li>
                <li>家居</li>
            </ul>
      </section>

      <section class="topBox">
          
      </section>

    </main>
    <footer class="footer center">
            <img src="./images/footer.png" alt="">
    </footer>
</body>

</html>